<template>
  <div>
    <audio :src="`${CDN}bgm.mp3`" autoplay loop preload></audio>
    <div @touchstart="pauseAudio" class="music-icon">
      <img :src="`${CDN}bgmicon.png`" alt="" v-if="!audioHide">
      <img :src="`${CDN}bgmicon-pause.png`" alt="" v-else>
    </div>
    <full-page :options="options" id="fullpage">
      <div class="section sectionFirst" :style="{height: innerHeight}">
        <div class="wrapper1" :style="{height: innerHeight}">
          <div class="gif" :style="{display: show?'block':'none'}">
          </div>
          <div class="page1Main"></div>
        </div>
      </div>
      <div
        class="section"
        :class="{active: item.active}"
        v-for="item in RenderingArr"
        :key="item.id"
        :style="{height: innerHeight}">
        <div class="wrapper2">
          <div class="main" :style="{transform: page2MainScale, top: page2MainTop}">
            <div :class="[item.id.indexOf('h')!==-1?'hxjj':item.id.indexOf('t')!==-1?'txhc':'szss']">
              <img :src="item.url" alt="">
              <div
                v-for="(item2,idx) in item.childrenId"
                :key="item2" class="learnMore"
                :class="[idx===0?'learnMore1':idx===1?'learnMore2':'learnMore3']"
                @click="linkToDetails(item2)"></div>
            </div>
          </div>
          <div class="footer">
            <img :src="item.footerUrl" alt="">
          </div>
        </div>
      </div>
      <div class="section forward" :style="{height: innerHeight}">
        <div class="wrapper wrapper3" :style="{height: innerHeight}">
          <div class="page3Main"></div>
          <img class="page3Footer" :src="`${CDN}footer.png`" alt="">
        </div>
      </div>
      <div class="section sectionLast" :class="{active: appointActive}" :style="{height: innerHeight}">
        <div class="wrapper4" :style="{height: innerHeight}">
          <div class="page4Main">
            <div class="appointForm" :style="{top: formTop}">
              <div class="formItemContainer">
                <el-input
                  type="text"
                  v-model="submitForm.realName"
                  class="act"
                  placeholder="请输入姓名"
                  @focus="handleAndroidInput"
                  @blur="handleVerify('realName')">
                </el-input>
              </div>
              <div class="formItemContainer">
                <el-input
                  type="number"
                  v-model="submitForm.mobile"
                  class="mobile"
                  placeholder="请输入手机号码"
                  @focus="handleAndroidInput"
                  @blur="handleVerify('mobile')">
                </el-input>
              </div>
              <div class="formItemContainer">
                <el-input
                  type="text"
                  v-model="submitForm.company"
                  placeholder="请输入工作单位"
                  @focus="handleAndroidInput"
                  @blur="handleVerify('company')">
                </el-input>
              </div>
              <div class="formItemContainer">
                <el-cascader
                  :options="carTypeArr"
                  :show-all-levels="false"
                  v-model="submitForm.carType"
                  placeholder="请选择意向车型"
                  @visible-change="handleVisibleChange"
                  @change="handleVerify('carType')">
                </el-cascader>
              </div>
              <div class="formItemContainer">
                <el-select
                  v-model="submitForm.finanProd"
                  placeholder="请选择意向金融产品"
                  @visible-change="handleVisibleChange"
                  @change="handleVerify('finanProd')">
                  <el-option
                    v-for="item in finanProdArr"
                    :key="item.proId"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="formItemContainer">
                <el-autocomplete
                  v-model="submitForm.address"
                  :fetch-suggestions="querySearchAsync"
                  :hide-loading="true"
                  placeholder="请输入希望上牌地(地级市)"
                  @focus="handleAndroidInput"
                  @blur="handleVerify('address')"
                  @select="handleSelect"
                ></el-autocomplete>
              </div>
              <div class="formItemContainer">
                <el-input
                  type="text"
                  v-model="submitForm.mail"
                  placeholder="请输入邮箱"
                  @focus="handleAndroidInput"
                  @blur="handleVerify('mail')">
                </el-input>
              </div>
              <div class="formItemContainer">
                <el-button class="sumbitBtn formItem" :class="{unactive: disabled}" @click="handleSubmitFormList">提交
                </el-button>
              </div>
            </div>
          </div>
          <img class="page4Footer" :src="`${CDN}footer.png`" alt="">
        </div>
      </div>
    </full-page>
    <div class="arrow" :class="{bottom: bottom40}" v-show="showArrow">
      <img :src="`${CDN}arrow.gif`" alt="">
    </div>
  </div>
</template>
<script>

  import {reg} from '@/assets/utils'
  import {appConfig} from '@/appglobal/appglobal.js'
  import {imgUrls} from './imgUrls'

  export default {
    data() {
      return {
        CDN: 'http://cntaipingapp.oss-cn-hangzhou.aliyuncs.com/oldage/img/taipingCar/',
        options: {
          licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
          afterLoad: this.afterLoad,
          onLeave: this.onLeave
          // scrollBar: true
        },
        RenderingArr: imgUrls,
        // 哪一页汽车页默认展示, 默认0
        fromIndex: 0,
        // 申请页那一屏默认展示
        appointActive: false,
        // 提交的表单信息
        submitForm: {
          realName: '',
          mobile: '',
          company: '',
          carType: [],
          finanProd: '',
          address: '',
          addressId: '',
          mail: ''
        },
        specStyl: {
          height: null,
          width: 'auto'
        },
        // 屏幕高
        innerHeight: window.innerHeight + 'px',
        clientHeight: 0,
        rate: 1,
        // 整个表单应该调整的top的值
        formTop: null,
        // 第2屏.main对应的该调整的样式，下面2个
        page2MainScale: 'scale(1)',
        page2MainTop: '0',
        carTypeArr: [
          {
            value: '太享豪车',
            label: '太享豪车',
            children: [
              {id: 1, value: '99997', label: '2019款 凯迪拉克XT5 25T 豪华型'},
              {id: 2, value: '1149485', label: '2019款 沃尔沃XC60 T5 四驱智逸版'},
              {id: 3, value: '1149749', label: '2019款 沃尔沃S90 2.0T T5 智逸版'},
              {id: 4, value: '1149750', label: '2019款 沃尔沃S90 2.0T T5 智远版'},
              {id: 5, value: '1156856', label: '2019款 沃尔沃XC90(进口) 2.0T T5 智逸版 5座'},
              {id: 6, value: '1156853', label: '2019款 沃尔沃V90(进口) CC T5 AWD 智远版'},
              {id: 7, value: '99995', label: '中东2018款X5低配  3.0T'},
              {id: 8, value: '99994', label: '中东2018款X5高配  3.0T'},
              {id: 9, value: '99993', label: '18款欧规 柴油Q7 3.0T基本'},
              {id: 10, value: '99992', label: '18款霸道4000 VXR（18铝，9气，真皮，后挂）灰色'},
              {id: 11, value: '99991', label: '塞纳 19款3.5两驱XLE真皮7座号墨版'},
              {id: 12, value: '99990', label: '途乐Y62  19款4.0XE'},
              {id: 13, value: '99989', label: '帕杰罗V97  18款3.8五门GLS天窗双差'},
              {id: 14, value: '99987', label: '宝马525Li 2019款豪华套装'},
              // 新的1个
              {id: 50, value: '1142216', label: '2018款 揽胜运动版新能源(进口) P400e 白色'},
              // 新加5个 20190312
              {id: 53, value: '100000', label: '2018款 揽胜运动版新能源(进口) P400e 红色'},
              {id: 54, value: '1133435', label: '2018款 发现神行 240PS HSE版'},
              {id: 55, value: '1169096', label: '2019款 揽胜星脉(进口) 250PS'},
              {id: 56, value: '1160313', label: '2019款 捷豹XEL 2.0T 200PS 尊享版'},
              {id: 57, value: '99985', label: '2.0L 300PS AWD R-Sport 运动版'},
            ]
          },
          {
            value: '石在舒适',
            label: '石在舒适',
            children: [
              {id: 15, value: '2000006', label: '2017款 速派 TSI280 DSG前行版'},
              {id: 16, value: '1127996', label: '2017款 帕萨特 280TSI DSG尊荣版'},
              {id: 17, value: '1139063', label: '2018款 凌渡 280TSI DSG舒适版'},
              {id: 18, value: '192588', label: '2017款 传祺GS8 320T 两驱豪华智联版'},
              {id: 19, value: '1142079', label: '2018款 昂科威 20T 两驱领先型'},
              {id: 20, value: '1129262', label: '2017款 自由光 2.0L 优越版'},
              {id: 21, value: '1127075', label: '2017款 凯迪拉克ATS-L 28T 时尚型'},
              {id: 22, value: '1127076', label: '2017款 凯迪拉克ATS-L 28T 技术型'},
              {id: 23, value: '99996', label: '2018款 天籁 2.0L 无级 XE时尚版'},
              {id: 24, value: '1129041', label: '2017款 科雷嘉 2.0L 两驱豪华版'},
              {id: 25, value: '1126409', label: '2017款 科雷傲 2.0L 两驱豪华版'},
              {id: 26, value: '99999', label: '2018款 威朗 三厢 15S 自动车享版'},
              {id: 27, value: '99988', label: '起亚K5 2016款 1.6T 双离合 LUX 全景天窗定制版'},
              {id: 28, value: '1133099', label: '2017款 君威 20T 尊贵型'},
              {id: 29, value: '1134791', label: '2018款 凯迪拉克XTS 28T 技术型'},
              {id: 30, value: '1156935', label: '2018款 凯迪拉克XT4 28T 两驱技术型'},
              {id: 31, value: '1156936', label: '2018款 凯迪拉克XT4 28T 两驱豪华型'},
              {id: 32, value: '1156939', label: '2018款 凯迪拉克XT4 28T 四驱领先运动型'},
              {id: 33, value: '1151942', label: '2019款 沃尔沃S60L T5 智远版'},
              {id: 34, value: '1133053', label: '2018款 沃尔沃S60L 1.5T T3 智进版'},
              {id: 35, value: '1160347', label: '2019款 沃尔沃V40(进口) T3 智逸版'},
              {id: 36, value: '1141938', label: '2018款 Espace(进口) TCe 300 旷逸版'},
              {id: 37, value: '1141939', label: '2018款 Espace(进口) TCe 300 舒逸版'},
              {id: 38, value: '1133365', label: '2018款 马自达CX-4 2.0L 自动两驱蓝天活力版'},
              // 新的2个
              {id: 51, value: '1142078', label: '2018款 昂科威 20T 两驱精英型'},
              {id: 52, value: '1156937', label: '2018款 凯迪拉克XT4 28T 两驱豪华运动型'},
            ]
          },
          {
            value: '惠选经济',
            label: '惠选经济',
            children: [
              {id: 39, value: '1133565', label: '2018款 明锐 1.6L 手动标准版'},
              {id: 40, value: '32450', label: '2016款 桑塔纳 1.6L 自动 风尚版'},
              {id: 41, value: '1133723', label: '2017款 传祺GS7 280T 两驱豪华型'},
              {id: 42, value: '1133686', label: '2017款 传祺GS3 200T 自动精英版'},
              {id: 43, value: '1160153', label: '2018款 传祺GS4 235T 自动两驱豪华智联百万纪念版'},
              {id: 44, value: '1160152', label: '2018款 传祺GS4 235T 自动两驱精英百万纪念版'},
              {id: 45, value: '1128357', label: '2017款 MGZS 1.5L 自动豪华版'},
              {id: 46, value: '1160133', label: '2019款 轩逸 1.6XV CVT智联尊享版 国V'},
              {id: 47, value: '99998', label: '2018款 MG6 20T 自动豪华智联版'},
              {id: 48, value: '1134381', label: '2018款 英朗 15T 双离合精英型'},
              {id: 49, value: '1128129', label: '2017款 朗逸 1.6L 自动舒适版'},
            ]
          },
        ],
        finanProdArr: [
          {proId: 1, value: '0061', label: '爽购'},
          {proId: 2, value: '0062', label: '畅用'},
          {proId: 3, value: '0063', label: '易还'}
        ],
        timer: null,
        timer2: null,
        show: true,
        disabled: false,
        audioHide: false,
        showArrow: false,  // 控制箭头的显示隐藏
        bottom40: false
      }
    },
    created() {
      if (this.$route.query.appointActive) {
        this.appointActive = !!(this.$route.query.appointActive - 0)
        if (this.appointActive) {
          this.RenderingArr.forEach(e => {  // 解决当点了某一车信息，再返回，再点另一车信息，内点击申请，不跳申请页
            e.active = false
          })
        }
      }
      this.$route.query.audioHide && (this.audioHide = !!(this.$route.query.audioHide))
      this.$route.query.showArrow && (this.showArrow = !!(this.$route.query.showArrow))
      if (this.$route.query.fromIndex) {
        this.fromIndex = this.$route.query.fromIndex - 0
        this.RenderingArr.forEach(e => {  // 必须先将所有active改为false
          e.active = false
        })
        this.RenderingArr[this.fromIndex].active = true
      }
      // 当url参数带了cartype时（从详情页过来的），拿到cartype
      this.$route.query.carType && (this.submitForm.carType = this.$route.query.carType)
      // console.log(this.submitForm.carType);
      this.specStyl.height = window.innerHeight + 'px'
      this.clientHeight = document.documentElement.clientHeight || document.body.clientHeight
      this.getData()
    },
    mounted() {
      this.setPage2MainsStyle()
      this.setPage4FormListTopValue()
      setTimeout(() => {
        this.show = false
      }, 1500)
      this.cc()
      if (this.audioHide) {
        const audio = document.querySelector('audio')
        audio.pause()
      }
    },
    methods: {
      hideFormListPageArrow() {  //解决第一页，跑车进场时隐藏箭头，进场结束显示，最后一页表单页隐藏箭头
        const formListPage = document.querySelector('.sectionLast.active') //sectionLast fp-section fp-table active
        const page1 = document.querySelector('.sectionFirst.active')
        const forwardPage = document.querySelector('.forward.active')
        const arrow = document.querySelector('.arrow img')
        // console.log(page1)
        if (formListPage) {
          this.showArrow = false
        }
        if (page1 && this.show === true) {  //show为false没必要执行下面代码
          this.showArrow = false
          setTimeout(() => {
            this.showArrow = true
          }, 1500)
        }
        if (page1) {
          arrow.src = 'http://cntaipingapp.oss-cn-hangzhou.aliyuncs.com/oldage/img/taipingCar/arrow_2.gif'
        } else {
          arrow.src = 'http://cntaipingapp.oss-cn-hangzhou.aliyuncs.com/oldage/img/taipingCar/arrow.gif'
        }
        if (forwardPage) {
          this.bottom40 = true
        } else {
          this.bottom40 = false
        }
      },
      afterLoad() {
        this.showArrow = true
        this.handleAndroidBlock()
        this.hideFormListPageArrow()
      },
      onLeave() {
        this.showArrow = false
        this.handleAndroidBlock()
        this.hideFormListPageArrow()
      },
      bb() {
        let _this = this
        let audioDOM = document.querySelector('audio')
        audioDOM.volume = 0.5
        audioDOM.play()
        document.removeEventListener('touchstart', function () {
          _this.bb()
        }, false)
      },
      cc() {
        let _this = this
        let audioDOM = document.querySelector('audio')
        audioDOM.play()
        document.addEventListener("WeixinJSBridgeReady", function () {
          if (!_this.audioHide) {
            _this.bb()
            // page1.click()
          }
        }, false)
        document.addEventListener('YixinJSBridgeReady', function () {
          if (!_this.audioHide) {
            _this.bb()
            // page1.click()
          }
        }, false)
        document.addEventListener("touchstart", function () {
          if (!_this.audioHide) {
            _this.bb()
            // page1.click()
          }
        }, false)
      },
      pauseAudio() {
        // console.log(this.audioHide);
        this.audioHide = !this.audioHide
        const audio = document.querySelector('audio')
        audio.pause()
        // audio.currentTime = 0.0
      },
      // 解决 安卓输入法键盘收起时，不能滚屏的问题
      handleAndroidBlock() {
        const DOM = document.querySelector('.section:nth-child(9)')
        let userAgent = navigator.userAgent
        if (userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1) {
          const formItemArr = document.querySelectorAll('.formItemContainer input')
          formItemArr.forEach(e => {
            e.blur()
          })
        }
      },
      querySearchAsync(queryString, cb) {
        if (!queryString) {
          return
        }
        let list = [{}]
        // 调用的后台接口
        let url = appConfig.DOMAIN + appConfig.APP_CONTEXT_PATH + '/city/getCityListByCityName'
        //从后台获取到对象数组
        this.axios.post(url).then((response) => {
          const {data} = response.data
          data.forEach(e => {
            if (e.value.includes(queryString) == true) {
              list.push(e)
            }
          })
          cb(list)
        }).catch((error) => {
          // console.log(error)
        })
      },
      handleSelect(item) {
        clearInterval(this.timer)
        this.submitForm.addressId = item.itemno
      },
      /**
       * 第二屏点击“了解更多”
       */
      linkToDetails(id) {
        let sec = 0  // 关于sec，因为当audioHide为false时，点击了解更多，再返回，之后无法关闭音乐，因为注册了两个音乐播放，关闭无法关闭第一个注册的音乐，所以可以先在进入“了解更多”之前关掉
        if (!this.audioHide) {
          this.audioHide = true
          sec = 1
        }
        this.$router.push({
          path: 'carInfo',
          query: {
            carId: id,
            audioHide: this.audioHide,
            sec: sec
          }
        })
      },
      handleAndroidInput() {
        // 解决安卓手机点input，输入法盖住input表单填写框
        const DOM = document.querySelector('.sectionLast')
        let userAgent = navigator.userAgent
        // alert(userAgent)
        if (userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1) {
          this.timer2 = setInterval(function () {
            // 核心
            DOM.scrollIntoView(false)
          }, 300)
        }
        if (userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
          clearInterval(this.timer)
        }
      },
      /**
       * 表单内容修改后的校验
       */
      handleVerify(type) {
        let userAgent = navigator.userAgent
        if (userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1) {
          clearInterval(this.timer2)
          window.addEventListener('resize', function () {
            const DOM = document.querySelector('.section:nth-child(9)')
            const nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight
            if (this.clientHeight > nowClientHeight) {
              // 键盘弹起
            } else {
              // 键盘收起
              let _this = this
              DOM.scrollIntoView(true)
            }
          })
        }
        if (userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
          if (type != 'carType' || type != 'finanProd') {
            this.timer = setInterval(() => {
              window.scrollTo(0, 0)
            }, 300)
          }
        }
        // 表单校验
        if (type == 'realName') {
          this.submitForm.realName = this.submitForm.realName.trim()
          if (!reg.CNName.test(this.submitForm.realName)) {
            this.submitForm.realName = ''
            this.$message({
              message: '请输入您的中文名字！',
              type: 'error',
              duration: 2000
            })
            return
          } else if (this.submitForm.realName.length > 10) {
            this.submitForm.realName = ''
            this.$message({
              message: '名字长度必须小于10！',
              type: 'error',
              duration: 2000
            })
            return
          }
        }
        if (type == 'mobile') {
          this.submitForm.mobile = this.submitForm.mobile.trim()
          if (!reg.PHONE.test(this.submitForm.mobile)) {
            this.submitForm.mobile = ''
            this.$message({
              message: '手机号码格式不正确！',
              type: 'error',
              duration: 2000
            })
            return
          }
        }
        if (type == 'company') {
          this.submitForm.company = this.submitForm.company.trim()
          if (!this.submitForm.company) {
            this.submitForm.company = ''
            this.$message({
              message: '工作单位不能为空',
              type: 'error',
              duration: 2000
            })
            return
          }
        }
        if (type == 'mail') {
          this.submitForm.mail = this.submitForm.mail.trim()
          if (!reg.EMAIL.test(this.submitForm.mail)) {
            this.submitForm.mail = ''
            this.$message({
              message: '邮箱格式不正确！',
              type: 'error',
              duration: 2000
            })
            return
          }
        }
      },
      handleVisibleChange(boolean) {
        boolean && (this.handleAndroidInput())
      },
      /**
       * 提交表单
       */
      handleSubmitFormList() {
        if (this.disabled) {
          this.$confirm('请勿重复提交！', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {

          }).catch(() => {

          })
          return
        }
        let {realName, mobile, company, carType, addressId, finanProd, address, mail} = this.submitForm

        // console.log(carType);
        // return
        carType = carType[carType.length - 1]
        let temp = this.areaArr.find(e => {
          return e.value === address
        })
        if (!temp) {
          this.$message({
            message: '希望上牌地必须选择下拉框的选项哦！',
            type: 'error',
            duration: 3000
          })
          return
        }
        address = addressId
        if (!realName || !mobile || !company || !carType || !finanProd || !address || !mail) {
          this.$message({
            message: '您的信息未填全！',
            type: 'error',
            duration: 3000
          })
          return
        }
        const url = appConfig.DOMAIN + appConfig.APP_CONTEXT_PATH + '/carSell/submitSHCarsell'
        let params = {};
        params.realName = realName;
        params.mobile = mobile;
        params.company = company;
        params.carType = carType;
        params.finanProd = finanProd;
        params.address = address;
        params.mail = mail;
        this.axios.post(url, params).then(res => {
          // 提交按钮置灰
          this.disabled = true
          const {data} = res
          if ('0000' == data.retCode) {
            this.$confirm('您的申请信息已经收集，请耐心等待我们的答复！', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'success'
            }).then(() => {

            }).catch(() => {

            })
          } else {
            this.disabled = false
            this.$confirm('数据录入不成功，请您重新输入！', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {

            }).catch(() => {

            })
          }
        })
      },
      /**
       * 第4屏，整个表单的paddingTop应该按多大比例调整
       */
      setPage4FormListTopValue() {
        let width = window.innerWidth
        let trueHeight = 1136 * width / 640
        let rate = window.innerHeight / trueHeight
        this.rate = rate
        this.formTop = 624 * rate / 100 + 'rem'
      },
      /**
       * 第二屏除底部栏的其他部分，根据屏幕剩余高度自适应的样式
       */
      setPage2MainsStyle() {
        let width = window.innerWidth
        let height = window.innerHeight
        // 关于1056，因为原图1136px，减去80px底部栏的高度，为1056px
        let mainHeight = 1056 * width / 640
        let footerHeight = 80 * width / 640
        if ((height - footerHeight) < mainHeight) {
          const rate = (height - footerHeight) / mainHeight
          this.page2MainScale = `scale(1, ${rate})`
          this.page2MainTop = -(1 - rate) * mainHeight / 2 + 'px'
        }
      },
      getData() {
        const url = appConfig.DOMAIN + appConfig.APP_CONTEXT_PATH + '/city/getCityListByCityName'
        this.axios.post(url)
          .then(res => {
            this.areaArr = res.data.data
          })
      }
    }
  }
</script>
<style lang="stylus">
  .wrapper, .wrapper2
    height 100%
    width 100%
    position relative

    .main
      position relative

    .learnMore
      position absolute
      width 1.75rem /* 175/100 */
      height .4rem /* 40/100 */
      top 0
      right .56rem

    /* 56/100 */

    .hxjj
      .learnMore1
        top 2.84rem

      /* 284/100 */

      .learnMore2
        top 5.44rem

      /* 544/100 */

      .learnMore3
        top 8.07rem

    /* 807/100 */

    .szss
      .learnMore1
        top 2.79rem

      /* 279/100 */

      .learnMore2
        top 5.48rem

      /* 548/100 */

      .learnMore3
        top 8.11rem

    /* 811/100 */

    .txhc
      .learnMore1
        top 2.78rem

      /* 278/100 */

      .learnMore2
        top 5.44rem

      /* 544/100 */

      .learnMore3
        top 8.07rem

    /* 807/100 */

    .footer
      position absolute
      bottom 0
      left 0

      .leftArrow, .rightArrow
        position absolute
        width .42rem /* 42/100 */
        height .42rem /* 42/100 */
        border-radius 50%
        top .05rem

      /* 5/100 */
      // background-color red

      .leftArrow
        left 2.63rem

      /* 263/100 */

      .rightArrow
        right 2.64rem

  /* 264/100 */
  .wrapper1
    background-color #abb0b4
    width 100%
    height 100%
    position relative

    .gif
      position absolute
      top 0
      left 0
      z-index 99
      width 100%
      height 100%
      background url('http://cntaipingapp.oss-cn-hangzhou.aliyuncs.com/oldage/img/taipingCar/page1_bg.gif') no-repeat center center
      background-size auto 100%

    .page1Main
      width 100%
      height 100%
      background url('http://cntaipingapp.oss-cn-hangzhou.aliyuncs.com/oldage/img/taipingCar/page1.png') no-repeat center center
      background-size auto 100%

  .wrapper3
    background url('http://cntaipingapp.oss-cn-hangzhou.aliyuncs.com/oldage/img/taipingCar/introduce_bg.gif') repeat-x
    background-size auto 100%

    .page3Main
      width 100%
      height 100%
      background url('http://cntaipingapp.oss-cn-hangzhou.aliyuncs.com/oldage/img/taipingCar/introduce.jpg') no-repeat center center
      background-size auto 100%

    .page3Footer
      position absolute
      bottom 0
      left 0

  .wrapper4
    background url('http://cntaipingapp.oss-cn-hangzhou.aliyuncs.com/oldage/img/taipingCar/page4_bg.png') repeat-x
    background-size auto 100%
    position relative

    .page4Main
      width 100%
      height 100%
      background url('http://cntaipingapp.oss-cn-hangzhou.aliyuncs.com/oldage/img/taipingCar/page4.png') no-repeat center center
      background-size auto 100%
      position relative

      .appointForm
        // transform translateY(6.24rem /* 624/100 */)
        width 6.4rem /* 640/100 */
        height 4.22rem /* 422/100 */
        position absolute
        top 6.24rem /* 624/100 */
        left 50%
        transform translateX(-50%)

      .formItemContainer
        margin 0 auto
        width 4.54rem /* 454/100 */

        .el-cascader, .el-select, .el-autocomplete
          width 100%

        input, .el-cascader, .el-select
          height .34rem /* 34/100 */
          margin-bottom .1rem /* 10/100 */
          font-size .2rem /* 20/100 */
          display inline-block
          line-height 1

          .el-input
            height 100%
            line-height 100%

            .el-input__icon
              line-height 100%

          .el-cascader__label
            top .06rem

        /* 6/100 */

        .formItem
          width 100%
          height .34rem /* 34/100 */
          padding 0
          padding-left .1rem /* 10/100 */
          font-size .2rem /* 20/100 */
          color #777
          margin-bottom .1rem /* 15/100 */
          border .01rem /* 1/100 */ solid #000

        .sumbitBtn
          background-color #981d2f
          font-size .2rem /* 20/100 */
          border-width 0
          color #fff

        .sumbitBtn.unactive
          background-color #aaa

    .page4Footer
      position absolute
      bottom 0
      left 0

  .el-cascader-menus
    height 50%

  .el-cascader-menu
    height 100%

  .el-message-box__wrapper
    .el-message-box
      width 4.5rem /* 450/100 */
      // position absolute
      // top 50%
      // transform translateX(-50%)

      .el-message-box__message p
        word-wrap break-word
        word-break normal

  // position absolute
  // top 50%
  // transform translateX(-50%)
  @keyframes circle {

  0% { transform: rotate(0deg)}
  100% { transform: rotate(360deg)}
  };
  .music-icon
    animation circle 5s infinite linear
    position fixed
    top 0.2rem
    right 0.2rem
    z-index 9

    img
      width .6rem

  .arrow
    position fixed
    bottom .2rem /* 20/100 */
    width 100%
    text-align center

    img
      width .88rem /* 88/100 */
      height .49rem

  /* 49/100 */
  .arrow.bottom
    bottom .4rem

  /* 40/100 */
</style>
